import React from 'react';


function withMouse(WrappedComponent) {
    
    class Mouse extends React.Component {
        state = {
            x: 0,
            y: 0,
        }

        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        } 

        componentDidMount() {
            window.addEventListener('mousemove', this.handleMouseMove);
        }

        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove);
        }
        
        

        render() {
            return (
                <div>
                    <WrappedComponent {...this.state} />
                </div>
            );
        }
    }
    
    return Mouse;
}

const Position = props => {
    return (
        <p>鼠标当前位置:(x: {props.x}, y: {props.y})</p>
    );
}

const MousePosition = withMouse(Position)


export default MousePosition;